var	url_satellite='http://{s}.tiles.mapbox.com/v3/dennisl.map-6g3jtnzm/{z}/{x}/{y}.png',
	url_mapQuest = 'http://otile3.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg',
	url_OSMtransport = 'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png',
	url_OSMstandart = 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',

	transport = new L.TileLayer(url_OSMtransport, {minZoom: 12, maxZoom: 18,
		attribution: ''}),
	standart = new L.TileLayer(url_OSMstandart, {minZoom: 12, maxZoom: 18,
		attribution: ''}),
	satellite = new L.TileLayer(url_satellite, {minZoom: 12, maxZoom: 18,
		attribution: ''}),
	mapQuest = new L.TileLayer(url_mapQuest, {minZoom: 12, maxZoom: 18,
		attribution: ''}),
	mapQuest2 = new L.TileLayer(url_mapQuest, {minZoom: 9, maxZoom:15});

var baseMaps = {
	'OSM Transport':transport,
	'MapQuest':mapQuest,
	'OSM Standart':standart,
	'Mapbox Satellite': satellite
};

var map = new L.Map('MainMap', {
	    layers: [mapQuest],
	    center: [10.772113,106.657832],
	    zoom: 16,
		zoomControl: false,
		contextmenu: false,
		contextmenuWidth: 160,
		contextmenuItems: [{
		text: 'Tìm đường từ đây',
	}, '-', {
		text: 'Tìm đường đến đây',
	}, {
		text: 'Chia sẻ địa điểm này',
	}, {
		text: 'Lưu lại vị trí này',
	}]
});

map.addControl(L.control.zoom({position: 'topright'}));
	
var LeafIcon = L.Icon.extend({
	options: {
	    iconUrl: '/public/plugin/images/marker-icon.png',
	    //iconSize: [50, 50],
	    iconAnchor: [12, 40],
	    popupAnchor: [0, -56],
	    shadowSize: [68, 95],
	    shadowAnchor: [22, 94]
	}
});

// For load photo
var photoLayer = L.photo.cluster().on('click', function (evt) {
	var photo = evt.layer.photo,
		template = '<img src="{url}" width="300" height="300" /></a><p>{caption}</p>';

	if (photo.video && (!!document.createElement('video').canPlayType('video/mp4; codecs=avc1.42E01E,mp4a.40.2'))) {
		template = '<video autoplay controls poster="{url}" width="300" height="300"><source src="{video}" type="video/mp4"/></video>';
	}; 

	evt.layer.bindPopup(L.Util.template(template, photo), {
		className: 'leaflet-popup-photo',
		minWidth: 300
	}).openPopup();
});


var gs = '/point/point_photo';
$.ajax({
type: "POST",
url: gs,
data :{
	position_id: position_id
},
success: function(data) {
	//console.log(data);
	var rows = [];
	for(i=0 ; i< data.length; i++){
		if (data[i].type== 0){
			var photo_data = {
					lat: data[i].latitude,
					lng: data[i].longtitude,
					thumbnail : data[i].link,
					url: data[i].link,
					video: '',
					caption: data[i].name
				};
		}else{
			var photo_data = {
					lat: data[i].latitude,
					lng: data[i].longtitude,
					thumbnail : data[i].link,
					url: '',
					video: data[i].link,
					caption: data[i].name
				};
		}
		
		rows.push(photo_data);
	}
	
	photoLayer.add(rows).addTo(map);
	map.fitBounds(photoLayer.getBounds());
}
});
// For load point
//Configure map
var map, user;
var markers = [];

var poiIcon = L.Icon.extend({
    options: {
        iconSize: [22,32],
        iconAnchor: [-20,0],
        shadowUrl: 'public/plugin/icons/poi_shadow.png',
        shadowSize: [22,13],
        shadowAnchor: [-31,-19],
        popupAnchor: [32,-2]
    }
});

var blackIcon = new poiIcon({iconUrl:'/public/plugin/icons/poi_black.png'});
var redIcon   = new poiIcon({iconUrl:'/public/plugin/icons/poi_red.png'});
var treeIcon  = new poiIcon({iconUrl:'/public/plugin/icons/tree_green.png',shadowUrl:'/public/plugin/icons/tree_shadow.png'});
//GET points
loadPoints();
function loadPoints() {
	var postData = {
		posid: position_id,
		pid: '',
		type: '',
		lat: '1',
		lng: '1'
	}
	$.ajax({
		type: "POST",
		url: '/point/point_get',
		data: {
			position_id:position_id
		},
		//TODO: Error handling
		success: function(data){
			
			for(i=0;i<markers.length;i++) {
				map.removeLayer(markers[i]);
			}
			markers = [];
		
			// Add markers
			for(i=0;i<data.length;i++) {
			
				var ftr = data[i];
	
				var options = {
					posid: ftr.position_id,
					pid: ftr.coordinate_id,
					type: ftr.type,
					icon: eval(ftr.type + 'Icon'),
					draggable: true
				};
				
				var point = L.marker([ftr.latitude,ftr.longtitude],options).addTo(map);
				map.panTo(new L.LatLng(ftr.latitude,ftr.longtitude));
				point.bindPopup(
					'<a class="btn btn-sm btn-warning" onClick="deletePoint(\'' + point.options.posid 
						+ '\');" href="#">Remove Me!</a>',
					{
						closeButton: false
					}
				);
	
				point.on('dragend', function(evt){
					updatePoint(evt.target);
				}); 
		
				markers.push(point);
			}
		}
	});
}
//DELETE point
function deletePoint(posid) {
	var point;
	for(i=0;i<markers.length;i++) {
		if(markers[i].options.posid == posid) {
			point = markers[i];
			map.removeLayer(markers[i]);
			markers.splice(i, 1);
		}
	}

	var postData = {
		posid: point.options.posid,
		pid: point.options.pid,
		type: point.options.type,
		lat: point.getLatLng().lat,
		lng: point.getLatLng().lng
	}
	
	$.ajax({
		type: "POST",
		url: '/point/ajax_remove',
		data: postData,
		success: function(xml) {	
		}
	});
}